<template>
  <div class="ws-err">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-col :xl="7" :lg="7" :md="9" :sm="24" :xs="24" class="mr20 mb20">
        <el-form :model="searchGroup" label-width="60px" @submit.native.prevent>
          <el-form-item label="失败时间" style="display: inline-block">
            <el-date-picker style="width: 130px;" placeholder="请选择时间" type="date" format="yyyy-MM-dd" v-model="searchGroup.time"></el-date-picker>
          </el-form-item>
          <el-button type="text" size="small" class="btn30 btn-search ml20" icon="el-icon-search" @click="handleSearchGroup">查询</el-button>
        </el-form>
        <el-table size="small" border :data="group_list" @row-click="handleClickSearchList" :header-cell-style="{background:'#f2f2f2'}">
          <el-table-column align="center" label="失败时间" prop="batch_time"></el-table-column>
          <el-table-column align="center" label="失败数量" prop="faild_count"></el-table-column>
        </el-table>
        <el-pagination :total="page_group.total" :current-page.sync="page_group.current" :page-size="page_group.size" @current-change="handleChangeCurrentGroup" layout="total, prev, pager, next, jumper"  class="fr mt20"></el-pagination>
      </el-col>
      <el-col :xl="16" :lg="16" :md="14" :sm="24" :xs="24" v-show="show">
        <el-form :model="searchOrder" label-width="60px" @submit.native.prevent>
          <el-form-item label="订单号" style="display: inline-block">
            <el-input style="width: 200px;" placeholder="请输入订单号" v-model="searchOrder.order_num"></el-input>
          </el-form-item>
          <el-button type="text" size="small" class="btn30 btn-search ml20" icon="el-icon-search" @click="handleSearchList">查询</el-button>
          
        </el-form>
        <el-table size="small" border :data="order_list" :header-cell-style="{background:'#f2f2f2'}">
          <el-table-column align="center" label="订单号" prop="order_no"></el-table-column>
          <el-table-column align="center" label="商户号" prop="merch_id"></el-table-column>
          <el-table-column align="center" label="打款时间" prop="pay_at"></el-table-column>
          <el-table-column align="center" label="交易金额" prop="deal_mount"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClickOrderList(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :total="page_order.total" :current-page.sync="page_order.current" :page-size="page_order.size" @current-change="handleChangeCurrentList" layout="total, prev, pager, next, jumper"  class="fr mt20"></el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="订单详情" :visible.sync="dialog" width="450px">
      <el-form :model="info" label-width="90px">
        <el-form-item label="订单号："><span class="fz12">{{ info.merch_id }}</span></el-form-item>
        <el-form-item label="银行订单号："><span class="fz12">{{ info.order_no }}</span></el-form-item>
        <el-form-item label="结算单号："><span class="fz12">{{ info.biz_no }}</span></el-form-item>
        <el-form-item label="金额："><span class="fz12">{{ info.amount }}</span></el-form-item>
        <el-form-item label="打款时间："><span class="fz12">{{ info.pay_time }}</span></el-form-item>
        <el-form-item label="打款状态："><span class="fz12">{{ info.status === 1000 ? '发起打款' : info.status === 2000 ? '打款成功' : info.status === 3000 ? '打款失败' : info.status === 4000 ? '取消打款' : '状态获取失败' }}</span></el-form-item>
        <el-form-item label="失败原因："><span class="fz12">{{ info.failed_reason }}</span></el-form-item>
        <el-form-item label="支付平台："><span class="fz12">{{ info.pay_plat === 1 ? '网商' : '平安' }}</span></el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { orderErrorInit, orderGroupSearch, orderGroupPage, orderListItem, orderListSearch, orderListInit, orderListPage } from '@/api/order'

export default {
  name: 'orderErrMes',
  components: {
    Breadcrumb
  },
  data() {
    return {
      show: true,
      dialog: false,
      group_list: [],
      order_list: [],
      searchGroup: {
        time: ''
      },
      page_group: {
        total: 0,
        size: 1,
        current: 1
      },
      page_order: {
        total: 0,
        size: 1,
        current: 1
      },
      searchOrder: {
        order_num: '',
        id: ''
      },
      info: {
        merch_id: '',
        order_no: '',
        biz_no: '',
        amount: '',
        pay_time: '',
        status: '',
        pay_plat: '',
        failed_reason: ''
      }
    }
  },
  methods: {
    init() {
      orderErrorInit().then(response => {
        if (response.data.errorCode === 0) {
          this.group_list = response.data.result.data
          this.page_group.total = response.data.result.total
          this.page_group.current = response.data.result.current_page
          this.page_group.size = response.data.result.per_page
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleSearchGroup() {
      orderGroupSearch(this.searchGroup).then(response => {
        if (response.data.errorCode === 0) {
          this.group_list = response.data.result.data
          this.page_group.total = response.data.result.total
          this.page_group.current = response.data.result.current_page
        }
      })
    },
    handleSearchList() {
      orderListSearch(this.searchOrder).then(response => {
        if (response.data.errorCode === 0) {
          this.order_list = response.data.result.data
          this.page_order.total = response.data.result.total
          this.page_order.current = response.data.result.current_page
        }
      })
    },
    handleChangeCurrentGroup(v) {
      orderGroupPage(v).then(response => {
        this.group_list = response.data.result.data
      })
    },
    handleChangeCurrentList(v) {
      orderListPage(v, this.searchOrder.id).then(response => {
        this.order_list = response.data.result.data
      })
    },
    handleClickSearchList(row) {
      orderListInit(row.id).then(response => {
        if (response.data.errorCode === 0) {
          this.searchOrder.id = row.id
          this.order_list = response.data.result.data
          this.page_order.total = response.data.result.total
          this.page_order.size = response.data.result.per_page
          this.page_order.current = response.data.result.current_page
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleClickOrderList(id) {
      orderListItem(id).then(response => {
        if (response.data.errorCode === 0) {
          this.dialog = true
          this.info.amount = response.data.result.amount
          this.info.biz_no = response.data.result.biz_no
          this.info.merch_id = response.data.result.merch_id
          this.info.order_no = response.data.result.order_no
          this.info.pay_plat = response.data.result.pay_plat
          this.info.pay_time = response.data.result.pay_time
          this.info.status = response.data.result.status
          this.info.failed_reason = response.data.result.failed_reason
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
  .ws-err{
    .el-table .active-row {
      background: blue;
    }
    .el-form{
      .el-form-item{
        margin-bottom: 10px;
      }
    }
  }
</style>
